<template>
	<view class="corrigendumBuilding">
		<view class="corrigendumBuilding-content ff-bg-fff ff-font-14 ff-color-222 ff-margin-12 ff-border-radius-10">
			<view class="ff-font-16 ff-padding-15 ff-font-weight-600 ff-border-bottom">勘误单位信息</view>
			<view class="ff-flex-between ff-align-items-one ff-border-bottom ff-padding-15">
				<view class="corrigendumBuilding-content-title ff-color-999">社会单位</view>
				<!-- <input class="ff-text-right" :disabled="true" v-model="assessDetails.companyName" /> -->
				<view class="ff-text-right">{{assessDetails.companyName}}</view>
			</view>
			<view class="ff-flex-between ff-border-bottom ff-padding-15">
				<view class="corrigendumBuilding-content-title ff-color-999">检测地址</view>
				<view class="ff-flex ff-text-right" @click="assessAddrClick">
					<view class="ff-line-height-1-3">{{ params.assessAddr }}</view>
					<u-icon color="#999" name="map-fill"></u-icon>
				</view>
			</view>
			<view>
				<view class="ff-flex-between ff-border-bottom ff-padding-15">
					<view class="releaseRequirements-content-title ff-color-999">项目类型</view>
					<view class="ff-flex ff-text-right" @click="assessProjectTypeClick">
						<view>{{ assessProjectTypeName }}</view>
						<u-icon color="#2a3c62" name="arrow-right"></u-icon>
					</view>
				</view>
				<!-- 项目类型弹框 -->
				<u-select v-model="assessProjectTypeState" label-name="macroName" value-name="id"
					:safe-area-inset-bottom="true" @confirm="assessProjectConfirm"
					:list="assessProjectTypeList"></u-select>
			</view>
			<view class="ff-flex-between ff-align-items-one ff-border-bottom ff-padding-15">
				<view class="corrigendumBuilding-content-title ff-color-999">建筑物面积(m²)</view>
				<input class="ff-text-right" placeholder="请输入" placeholder-style="color:#999" type="digit"
					v-model.trim="params.assessProjectArea" />
			</view>
			<view>
				<view class="ff-flex-between ff-align-items-one ff-padding-15">
					<view class="corrigendumBuilding-content-title ff-color-999">主要消防设施</view>
					<view class="ff-flex ff-text-right" @click="facilitiesClick">
						<view>
							<view v-if="facilitiesSelectList.length > 0" class="ff-color-blue">
								{{ facilitiesSelectList.length }}项
							</view>
							<view v-else>请选择消防设施</view>
						</view>
						<u-icon color="#2a3c62" name="arrow-right"></u-icon>
					</view>
				</view>
				<!-- 选中的主要消防设施 -->
				<view v-if="facilitiesSelectList.length > 0" class="ff-padding-left-4">
					<view class="ff-flex-wrap ff-padding-15">
						<view class="ff-margin-right-10 ff-margin-bottom-10"
							v-for="(item, index) of facilitiesSelectList" :key="index">
							<u-tag :text="`${index + 1}.${item.facilitiesTypeName}`" />
						</view>
					</view>
				</view>
				<!-- 消防设施弹框 -->
				<u-popup v-model="facilitiesState" mode="bottom" height="55%">
					<view>
						<view class="ff-flex-between ff-padding-20 ff-bg-fff facilitiesBut">
							<view class="ff-color-666" @click.stop="cancelClick">取消</view>
							<view class="ff-color-blue" @click.stop="confirmClick">确认</view>
						</view>
						<view class="ff-margin-left-30 ff-margin-right-30 ff-padding-top-50 ff-padding-bottom-20">
							<u-checkbox-group>
								<u-checkbox v-for="(item, index) of facilitiesList" v-model="item.checkState"
									:key="index" :name="item.facilitiesTypeName">
									{{ item.facilitiesTypeName }}
								</u-checkbox>
							</u-checkbox-group>
							<view class="ff">{{ item.facilitiesTypeName }}</view>
						</view>
					</view>
				</u-popup>
			</view>
		</view>
		<view class="corrigendumBuilding-but ff-flex-between">
			<view class="corrigendumBuilding-but-list"><u-button type="primary" shape="circle"
					@click="upateBuildsClick">保存</u-button></view>
		</view>
		<!-- 弹窗区 -->
		<u-toast ref="uToast" />
		<f-loading ref="loading" />
		<!-- 未获取到定位示弹框 -->
		<u-modal v-model="locationModal" title="温馨提示" :content-style="{ 'line-height': '1.5' }"
			content="当前位置获取失败，请您开启GPS定位权限后再试！" />
	</view>
</template>

<script>
	export default {
		name: 'corrigendumBuilding',
		data() {
			return {
				locationModal: false, // 定位失败弹窗
				assessDetails: {}, // 信息勘误项目详情
				assessProjectTypeName: '', // 项目名称
				// 项目类型相关
				assessProjectTypeState: false, // 项目类型弹框显/隐
				assessProjectTypeList: [], // 项目类型列表数据
				// 主要消防设施
				facilitiesState: '', // 主要消防设施显/隐
				facilitiesList: [], // 主要消防设施数据
				facilitiesSelectList: [], // 选中的主要消防设施
				// 勘误提交的数据
				params: {
					assessId: '', // 检测项目ID
					assessAddr: '', // 检测项目地址
					assessLongitude: '', // 检测项目经度
					assessLatitude: '', // 检测项目纬度
					assessProjectType: '', // 项目类型(字典ID
					assessProjectArea: '', // 建筑面积(m²)
					facilities: [] // 主要消防设施
				}
			};
		},
		onLoad(e) {
			// console.log('前页面传过来的数据------', e);
			this.params.assessId = e.assessId;
			this.getAssessDetails(e.assessId); // 获取检测项目详情页数据
			this.getAssessProjectTypeList(); // 获取项目列表数据
		},
		methods: {
			// 获取检测项目详情页数据
			async getAssessDetails(assessId) {
				this.$refs.loading.openLoading('加载中···'); // 打开loading动画
				const data = await this.$http.post({
					url: '/bsAssessProjectInfo/detail',
					data: {
						assessId: assessId
					}
				});
				// console.log('获取检测项目详情页数据-----', data);
				if (data.code == 200) {
					this.$refs.loading.closeLoading(); // 关闭loading动画
					let dat = data.data;
					this.assessDetails = dat;
					this.assessProjectTypeName = dat.assessProjectTypeName;
					this.params.assessAddr = dat.assessAddr;
					this.params.assessLongitude = dat.assessLongitude;
					this.params.assessLatitude = dat.assessLatitude;
					this.params.assessProjectType = dat.assessProjectType;
					this.params.assessProjectArea = dat.assessProjectArea;
					this.facilitiesSelectList = dat.facilities;
					this.facilitiesSelectList.forEach(item => {
						this.$set(item, 'checkState', true);
						this.$set(item, 'id', item.facilitiesTypeId);
					});
					this.getFacilitiesList(); // 获取主要的消防设施列表数据
				}
			},
			// 检测地址
			assessAddrClick() {
				let that = this;
				uni.chooseLocation({
					success: function(res) {
						// console.log('获取检测地址数据---------', res);
						that.params.assessAddr = that.$check.emptySpecial(res.address); // 单位注册地址，清除特殊字符
						that.params.assessLongitude = res.longitude; // 单位经度
						that.params.assessLatitude = res.latitude; // 单位纬度
					},
					fail(error) {
						// console.log('位置定位失败返回----', error);
						that.locationModal = true;
					}
				});
			},
			//---------------项目类型相关----------------------
			// 请求项目类别列表
			async getAssessProjectTypeList() {
				let that = this;
				this.$http.get({
					url: '/sys/macro/catalog/assess_project_type'
				}).then(res => {
					// console.log('请求项目类别列表----', res.data);
					if (res.code == 200) {
						that.assessProjectTypeList = res.data; // 获取项目类别数据
					}
				});
			},
			// 点击选择项目类型-------打开弹窗
			assessProjectTypeClick() {
				this.assessProjectTypeState = true;
			},
			// 点击选择项目类型------确定操作
			assessProjectConfirm(e) {
				this.params.assessProjectType = e[0].value;
				this.assessProjectTypeName = e[0].label;
			},
			// ----------------主要消防设施系列--------------------
			// 获取主要消防设施数据
			async getFacilitiesList() {
				this.$refs.loading.openLoading('加载中···'); // 打开loading动画
				const data = await this.$http.get({
					url: '/project/queryFacilitiesType'
				});
				// console.log('获取主要消防设施数据------------', data);
				if (data.code == 200) {
					let dat = [];
					data.data.forEach(res => {
						this.$set(res, 'checkState', false);
						this.facilitiesSelectList.forEach(item => {
							if (item.facilitiesTypeName == res.facilitiesTypeName) {
								this.$set(res, 'checkState', true);
							}
						});
					});
					this.facilitiesList = data.data; // 给需求类别赋值
				} else {
					this.$refs.uToast.show({
						title: data.msg,
						type: 'error'
					});
				}
				this.$refs.loading.closeLoading(); // 关闭loading动画
			},
			// 点击打开主要消防设施
			facilitiesClick() {
				this.facilitiesState = true;
			},
			// 取消关闭消防设施弹窗
			cancelClick() {
				this.facilitiesState = false;
			},
			// 确定消防设施弹窗
			confirmClick() {
				this.facilitiesSelectList = [];
				this.facilitiesList.filter(res => {
					if (res.checkState) {
						this.facilitiesSelectList.push(res);
					}
				});
				this.facilitiesState = false;
			},
			// 保存-----确定操作
			upateBuildsClick() {
				let that = this;
				this.facilitiesSelectList.forEach(item => {
					if (item.checkState == true) {
						this.params.facilities.push(item.id);
					}
				});
				if (!that.$check.numberCheckPoint(that.params.assessProjectArea)) {
					that.$refs.uToast.show({
						title: '建筑面积不能为负数，且允许保留小数点后2位',
						type: 'error'
					});
					return;
				}

				if (this.params.facilities.length < 1) {
					that.$refs.uToast.show({
						title: '请至少选择一项消防设施',
						type: 'error'
					});
					return;
				}
				that.$refs.loading.openLoading('提交中···'); // 打开loading动画
				that.$http.post({
					url: '/bsAssessProjectInfo/update',
					data: that.params
				}).then(res => {
					// console.log('勘误信息---保存返回的结果', res);
					that.$refs.loading.closeLoading(); // 关闭loading动画
					if (res.code == 200) {
						that.$refs.uToast.show({
							title: res.msg,
							type: 'success'
						});
						setTimeout(() => {
							// 刷新前一个页面 （配合前页面的onShow使用）
							uni.navigateBack({
								delta: 1,
								success: function() {
									let page = getCurrentPages().pop(); //跳转页面成功之后
									if (!page) return;
									page.onLoad(page.options); //如果页面存在，则重新刷新页面
								}
							});
						}, 500);
					} else {
						that.$refs.uToast.show({
							title: res.msg,
							type: 'error'
						});
					}
				});
			}
		},
		onShareAppMessage() {
			return {
				title: '分享小程序给朋友',
				path: '/pages/homePage/Home'
			};
		}
	};
</script>

<style lang="scss">
	.corrigendumBuilding {
		.u-size-default {
			height: auto !important;
		}
	}
</style>
<style lang="scss" scoped>
	.corrigendumBuilding {
		&-content {
			&-title {
				width: 32%;
			}

			.facilitiesBut {
				position: fixed;
				top: 0;
				left: 0;
				width: 100%;
				z-index: 99;
			}
		}

		&-but {
			&-list {
				width: 90%;
				margin: 15% 5%;

				/deep/.u-btn--primary {
					color: #ffffff !important;
					border-color: #3178ff !important;
					background-color: #3178ff !important;
				}
			}
		}
	}
</style>